<!--
 * @Author       : tingke
 * @Date         : 2021-03-01 09:12:36
 * @LastEditors  : tingke
 * @LastEditTime : 2021-03-01 09:54:21
 * @FilePath     : /React/04_component.html
 * @Description  :
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react.min.js - React 的核心库 -->
    <script src="./react/react.development.js"></script>
    <!-- react-dom.min.js - 提供与 DOM 相关的功能 -->
    <script src="./react/react-dom.development.js"></script>
    <!-- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。 -->
    <!-- 生产环境中不建议使用 -->
    <script src="./react/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        /**
         * 1. 我们可以使用函数定义了一个组件，如 Url
         * 2. 也可以使用 ES6 class 来定义一个组件，如 Name 和 Nickname
         * 3. 原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头
         * 4. 组件类只能包含一个顶层标签，否则也会报错
         * 5. 向组件传递参数，可以使用 this.props 对象
         *      tips: 在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
         * 6. 复合组件：通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离
         *
         * */

        const myStyle = { color: 'red', textAlign: 'center'};
        class Name extends React.Component {
            render() {
                return <h1 style={myStyle}>网站名称：{this.props.name}</h1>
            }
        }
        function Url(props) {
            return <h1 >网站地址：{props.url}</h1>
        }
        class Nickname extends React.Component {
            render() {
                return <h1 >网站别名：{this.props.nickname}</h1>
            }
        }

        function App(props) {
            return (
                <div>
                    <Name name={props.name} />
                    <Url url={props.url} />
                    <Nickname nickname={props.nickname} />
                </div>
            )
        }

        ReactDOM.render(
            <App name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"} />,
            document.getElementById('example')
        );
    </script>
</body>
</html>
